<template>
  <div id="app">
    <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">
      <!--抬头开始-->
      <el-header>
        <Top/>
      </el-header>
      <!--抬头结束-->
      <el-container>
        <!--内容开始-->
        <el-main >
          <div style="height: 1000px">
              <b><p style="text-align: center;font-size: 30px;text-shadow: -3px -3px 10px white, 3px 3px 10px black;color: white">积分：{{integralNow}}</p></b>
              <el-button @click="clearFilter" style="background-color: lightskyblue;color: white">清除所有过滤器</el-button>
            <el-button type="primary" @click="dialogFormVisible = true" style="margin-right: 5%">充值积分</el-button>
            <el-dialog title="输入金额" :visible.sync="dialogFormVisible">
              <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                <el-form-item
                    label="金额"
                    prop="money"
                    :rules="[
                              { required: true, message: '金额不能为空'},
                              { pattern: /^[1-9]\d*$/, message: '金额必须为正整数'}
                            ]">
                  <el-input v-model.number="numberValidateForm.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                  <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          <el-table
              ref="filterTable"
              :data="tableData"
              style="width: 100%;margin-top: 2%;margin-bottom: 3%">
            <el-table-column
                prop="createTime"
                label="日期"
                sortable
                width="180"
                :filters="sdeptFilter"
                filter-placement="bottom-end"
                :filter-method="filterChange"
            >
            </el-table-column>
            <el-table-column
                prop="eachNum"
                align="center"
                label="积分数额">
            </el-table-column>
            <el-table-column
                prop="used"
                align="center"
                label="用途"
                :formatter="formatter">
            </el-table-column>

            <el-table-column
                prop="statement"
                label="收支状态"
                width="100"
                :filters="[{ text: '收入', value: 0 }, { text: '支出', value: 1 }]"
                :filter-method="filterTag"
                filter-placement="bottom-end">
              <template slot-scope="scope">
                <el-tag type="success" effect="dark" v-if="scope.row.statement==1">支出</el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.statement==0">收入</el-tag>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </el-main>

        <!--内容结束-->
      </el-container>
      <!--底部开始-->
      <Bottom/>
      <!--底部结束-->
    </el-container>
  </div>
</template>
<script>
import Top from '@/components/Top.vue'
import Bottom from "@/components/Bottom.vue";
import axios from "axios";
import '@/api/request'
export default {
  components: {
    Top,
    Bottom,
  },
  data() {
    return {
      numberValidateForm: {
        money: ''
      },
/*      form: {
        money: '',
      },*/
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      userId:'',
      user: localStorage.user ? JSON.parse(localStorage.getItem('user')) : null,
      integralNow:'',
      tableData: [],
      apiArr:[],
      sdeptFilter: []
    }
  },
  created() {
      if (JSON.parse(localStorage.getItem("user"))==null)return
    this.userId=  JSON.parse(localStorage.getItem("user")).id
    console.log(this.userId)
    axios.get('http://localhost:8088/integralDetail/getIntegralDetail/'+ this.userId).then((response)=>{
      console.log(response);
       this.tableData=response.data.data;
    })
    axios.get('http://localhost:8088/user/info/'+ this.userId).then((res)=>{
          console.log(res);
          localStorage.integral = JSON.stringify(res.data.data.integral);
          this.integralNow=JSON.parse(localStorage.getItem("integral"));
      })

  },
  mounted() {
    //挂载后获取后端数据将数据存入sdeptFilter
      if (JSON.parse(localStorage.getItem("user"))==null)return
    axios
        .get('http://localhost:8088/integralDetail/getIntegralDetail/'+this.userId)
        .then(res => {
          //将后端的数据存储进一个变量，因为接受的是一组数据的对象所以我循环把我想要的单个数据存储进
          //一个数组变量并调用去重函数，存储到data里的sdeptFilters
          let itSdept = res.data.data;
          let array = [];
          for (let i = 0; i < itSdept.length; i++) {
            array.push(itSdept[i].createTime);
          }
          let arr = this.unique(array);
          for (let i = 0; i < arr.length; i++) {
            let temp = { text: arr[i], value: arr[i] };
            this.sdeptFilter.push(temp);
          }
          this.unique(this.sdeptFilter);
        })
        .catch(error => {
          console.log(error);
        });
  },
  methods: {
    submitForm(formName) {//充值
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8088/pay/alipay?money='
          axios.post(url+this.numberValidateForm.money).then((response) => {
            document.write(response.data)
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {//重置
      this.$refs[formName].resetFields();
    },
    clearFilter() {//清空过滤条件
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.used;
    },
    filterTag(value, row) {
      return row.statement === value;
    },
    filterChange(value, row, column) {
      return row["createTime"] === value
    },
    //将数组和对象去重
    unique(arr) {
      var hash = [];
      for (var i = 0; i < arr.length; i++) {
        if (hash.indexOf(arr[i]) == -1) {
          hash.push(arr[i]);
        }
      }
      return hash;
    }
  }
}
</script>
<style>
body {
    margin: 0;

}

.shadow {
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #1d2d44;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}


.el-message {
    top: 100px !important;
}
</style>

